<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="myDiv">
        <p id="p1">这是一段文字</p>
        <p id="p2">这是一段文字</p>
        <p id="p3">这是一段文字</p>
    </div>
    <input name="sex" type="radio" value="男">男
    <input name="sex" type="radio" value="女">女
    <input name="sex" type="radio" value="3">第三性别
    <div id="div2"></div>
    <script>
        var myDiv=document.getElementById("myDiv");
        console.log(myDiv);
        var myp=document.getElementsByTagName("p");
        //console.log(myp);
        //myDiv.innerHTML="这是个Div";
        var p4=document.createElement("p");  //createElement创建节点
        var textNode=document.createTextNode("这是第四段文字");
        p4.appendChild(textNode);  //appendChild末尾追加方式插入节点
        //console.log(p4);
        // document.getElementById("myDiv").appendChild(p4);
        myDiv.insertBefore(p4,myDiv.childNodes[2]);  //insertBefore在指定节点前插入新节点
        //克隆节点
        var node=document.getElementsById("p3").cloneNode(true);   //cloneNode克隆节点
        //追加末尾子节点
        document.getElementById("div2").appendChild(node);
        //替换子节点
        document.getElementById("myDiv").replaceChild(node,myDiv);
        //删除子节点
        document.getElementById("Div2").removeChild(node);
        //设置属性值

        // var myI=document.getElementsByName("sex");
        // console.log(myI);
        // console.log(myI[0].getAttribute("value"));
        // myI[2].setAttribute("value","第三性别");
        // console.log(myI[2]);
    </script> 
</body>
</html>